// 量测数据 MeasureData.vue
<template>
  <div class="tab-pane fit relative-position">
    <table class="fit-width table">
      <thead>
        <tr>
          <th>#</th>
          <th>{{ $t('测量时间') }}</th>
          <th>{{ $t('测点状态') }}</th>
          <th>{{ $t('测量值') }} (mm)</th>
          <th>{{ $t('变化速率') }} (mm/d)</th>
          <th>{{ $t('累计变化量') }} (mm)</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, idx) in dataList" :key="item.factid">
          <td>{{ idx + 1 }}</td>
          <td>{{ item.updatetime }}</td>
          <td v-if="item.surveystatus === 0" style="color:green;">{{ $t('正常') }}</td>
          <td v-else style="color:red;">{{ $t('破坏重埋') }}</td>
          <td>{{ transNum(item.deltavalue) }}</td>
          <td>{{ transNum(item.speed) }}</td>
          <td>{{ transNum(item.cumu) }}</td>
        </tr>
      </tbody>
    </table>
    
    <!--
      将QInnerLoading放置为最后一个子元素。
      这对于将其显示在其他内容之上很重要。
    -->
    <q-inner-loading :visible="tabPaneLoading">
      <template v-if="tabPaneLoadingContent">
        {{ tabPaneLoadingContent }}
      </template>
      <q-spinner-gears v-else size="50px" color="primary"></q-spinner-gears>
    </q-inner-loading>
  </div>
</template>

<script>
  export default {
    name: 'measure-data',
    props: {
      dealData: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data () {
      return {
        tabPaneLoading: true,
        tabPaneLoadingContent: '',
        dataList: []
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.getSurveyData();
      })
    },
    methods: {
      transNum(num) {
        return (Number(num) * 1000).toFixed(2);
      },
      getSurveyData() {
        this.dataList = [];
        return this.$axios.getSurveyData({
          data: {
            eq_csecid: this.dealData.detailInfo.csecid,
            eq_csec_name: this.dealData.detailInfo.csec_name,
            eq_point_alias: this.dealData.label,
            page: 1,
            size: 5
          }
        }).then(result => {
          this.dataList = result.data || [];
          this.tabPaneLoading = false;
        }).catch(err => {
          this.tabPaneLoadingContent = err.msg || this.$t('没有找到量测数据');
        });
      }
    }
  }
</script>

<style lang="less" scoped>
.tab-pane{
  padding: 5px;

  .table{
    tr{
      font-size: .8rem;

      th{
        word-wrap: break-word;
        // word-break: break-all;
      }

      th,td{
        padding: 0 3px;
      }
    }
  }

  .q-inner-loading{
    background-color: rgba(255, 255, 255, 1);
  }
}
</style>

